<style>
.highcharts-tooltip>span {
	background-color: #fff;
	border: 1px solid #172F8F;
	border-radius: 5px;
	opacity: 1;
	z-index: 9999 !important;
	padding: .8em;
}
</style>
<div class="row">
	<br/>
	<div class="col-md-12">
        <table class="table table-striped table-hover" style="margin-top: 0px">
                <thead>
	                <tr>
	                    <td>Broker</td>
	                    <td>队列</td>
	                    <td>最小偏移量</td>
	                    <td>最大偏移量</td>
	                    <td>消息量</td>
	                    <td>最后更新时间</td>
	                </tr>
                </thead>
                <tbody>
	                <#if response.notOK>
					     <tr>
		                    <td colspan=6 align="center">
		                    	暂无数据
		                    </td>
		                <tr>
					<#else>
						<#list response.result as k, v>
							<#assign loop=1>
							<#list v as mq, offset>
									<#if loop == 1>
										<tr onclick="toggleTR('${k}')" style="cursor:pointer">
										<td id='${k}' _rowspan="${v?size+1}"><span id="${k}_span" class="mqcloudcollapse">&nbsp;&nbsp;&nbsp;</span> ${k}</td>
										<#assign loop+=1>
										<td>全部</td>
			                    		<#assign totalOffset=0>
			                    		<#assign minOffset = offset.minOffset>
			                    		<#assign maxOffset=0>
			                    		<#assign maxLastUpdateTimestamp=0>
			                    		<#list v as mqInner, offsetInner>
			                    			<#if minOffset gt offsetInner.minOffset>
			                    				<#assign minOffset = offsetInner.minOffset>
			                    			</#if>
			                    			<#if maxOffset lt offsetInner.maxOffset>
			                    				<#assign maxOffset = offsetInner.maxOffset>
			                    			</#if>
			                    			<#assign totalOffset += offsetInner.maxOffset - offsetInner.minOffset>
			                    			<#if maxLastUpdateTimestamp lt offsetInner.lastUpdateTimestamp>
			                    				<#assign maxLastUpdateTimestamp = offsetInner.lastUpdateTimestamp>
			                    			</#if>
			                    		</#list>
										<td>${minOffset?string(",###")}</td>
			                    		<td>${maxOffset?string(",###")}</td>
			                    		<td>${totalOffset?string(",###")}</td>
			                    		<td>
				                    		<#if maxLastUpdateTimestamp <= 0>
				                    			暂无
				                    		<#else>
					                    		${maxLastUpdateTimestamp?number_to_datetime?string("yyyy-MM-dd HH:mm:ss")}
				                    		</#if>
			                    		</td>
			                    		</tr>
									</#if>
									<tr class="${k}" style="display:none;">
				                    	<td>${mq.queueId}</td>
				                    	<td>${offset.minOffset}</td>
				                    	<td>${offset.maxOffset}</td>
				                    	<td>${offset.maxOffset - offset.minOffset}</td>
				                    	<td>
				                    		<#if offset.lastUpdateTimestamp <= 0>
				                    			暂无
				                    		<#else>
					                    		${offset.lastUpdateTimestamp?number_to_datetime?string("yyyy-MM-dd HH:mm:ss")}
				                    		</#if>
				                    	</td>
			                   		</tr>
							</#list>
						</#list>
					</#if>
                </tbody>
           </table>
    </div>
</div>

<!-- 	准备搜索部分 -->
<div class="row">
<div class="col-md-12">
	<div class="border-top"></div>
	<div style="float:left;margin:10px 5px;"><h5><b>${topic.name}</b> 生产流量图</h5></div>
	<div id="produce_search" style="float:right;margin:10px 0px;"></div>
</div>
</div>
<!-- 	准备曲线图 -->
<div id="produce_lineChart"><center>暂无数据</center></div>
<script>
var statMap;
function toggleTR(clz){
	if($("tr."+clz).is(':visible')){
		$("tr."+clz).hide();
		$("#"+clz).removeAttr("rowspan");
		$("#"+clz+"_span").removeClass("mqclouexpand").addClass("mqcloudcollapse");
	} else {
		$("tr."+clz).show();
		$("#"+clz).attr("rowspan", $("#"+clz).attr("_rowspan"));
		$("#"+clz+"_span").removeClass("mqcloudcollapse").addClass("mqclouexpand");
	}
}
<#if response.OK>
$(function() {
	lineChart("produce", function (){
		$("#tid").val("${topic.id}");
	}, function chartToolTip(chart){
		if(!chart){
			statMap = null;
			return;
		}
		if(chart.dataMap){
			if(!statMap){
				statMap = chart.dataMap;
			} else {
				for(var k in chart.dataMap){
					statMap[k] = chart.dataMap[k];
				}
			}
		}
		chart.tooltip = {
			formatter: function () {
				var s = '<span style="font-size: 10px">'+this.x+'</span><br/>';
				$.each(this.points ,function(){
					s += '<span style="color: '+this.series.color+'">\u25CF</span>'+this.series.name+': <b>'+this.y+'</b><br/>';
					var exception = statMap[this.series.name + '_' + this.x];
					if (exception) {
						s += '<span style="color: red">' +exception+ '</span><br/>';
					}
				});
				return s;
			},
			useHTML: true,
			borderWidth: 0,
			backgroundColor: "rgba(255,255,255,0)",
			shadow: false,
			shared: true
		};
	});
});
</#if>
</script>